import React from 'react';
import './index.less';
import {createPage, base} from 'nc-lightapp-front';
import {render} from 'src/hrpub/common/frame';
import MainAction from '../actions/main';
import ButtonAction from '../actions/btn';
import TreeAction from '../actions/tree';
import TableAction from '../actions/table';
import tabAction from '../actions/tab';
import copyAction from "../actions/copy";
import Layout from 'src/hrpub/common/components/Layout';
import LeftTree from "../components/LeftTree";
import Table from "../components/Table";
import HROrgTreeRef from "../../../refer/trnref/HROrgTreeRef";
import AlertModal from "../components/AlertModal";
import refs from '../actions/refs';

const {NCProgressBar} = base;
const {Header, Content, Left} = Layout;
const HomePage = render({
    actions: {
        mainAct: MainAction,
        btnAct: ButtonAction,
        treeAct: TreeAction,
        tableAct: TableAction,
        tabAct: tabAction,
        copyAct: copyAction
    }
})(({props, action, state}) => {
    const {button, main} = props;
    const {language, orgValue, isEdit} = main;
    return (
        <div>
            <Layout className="psn-author nc-bill-card">
                <Header
                    showButtons={true}
                    showOrgRefer={true}
                    orgReferOptions={{
                        getOrgData: action.btnAct.changeOrg,
                        orgVal: orgValue,
                        disabled: isEdit,
                    }}
                    buttonOptions={{
                        area: 'appconfgrid',
                        onButtonClick: action.btnAct.headerClick
                    }}
                    button={button}
                />
                <Left
                    style={{
                        top: '46px'
                    }}
                >
                    <LeftTree
                        {...props}
                        onTreeSelect={action.treeAct.onTreeSelect}
                    />
                </Left>
                <Content
                    style={{
                        marginLeft: '250px'
                    }}>
                    <Table
                        {...props}
                        tableAfterEdit={action.tableAct.tableAfterEdit}
                        tabChange={action.tabAct.tabChange}
                        changeApprove={action.tableAct.changeApp}
                    />
                </Content>
                <div style={{display: 'none'}}>
                    <HROrgTreeRef
                        value={[]}
                        isMultiSelectedEnabled={true}
                        onChange={action.copyAct.copy}
                        clickContainer={<button id='copy-ory-button'/>}
                        queryCondition={
                            () => {
                                return {
                                    "TreeRefActionExt": "nccloud.web.hr.sqlbuilder.HRPrimaryOrgSQLBuilder"
                                }
                            }
                        }
                    />
                </div>
            </Layout>
            <AlertModal ref={node => refs.alertModalNode = node} language={language}/>
        </div>
    );
});

export default createPage({})(HomePage);